<template>
  <j-modal
    :title="title"
    :width="1350"
    :visible="visible"
    :maskClosable="false"
    footer=""
    @cancel="handleCancel">
    <a-card :bordered="true" class="card" >
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">

      </div>

      <!-- table区域-begin -->
      <div>


        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange">

          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text,record">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button
              v-else
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
              @click="downloadFile(text)">
              下载
            </a-button>
          </template>

          <span slot="status" slot-scope="text, record, index">
            <a-tag color="pink" v-if="text==0">失效</a-tag>
            <a-tag color="#87d068" v-if="text==1" >正常</a-tag>
        </span>

          <span slot="isBuy" slot-scope="text, record, index">
            <span style='color: red' v-if='record.isBuy==1'>已申购</span>
              <span v-if='record.isBuy==0' >未申购</span>
          </span>

          <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

        </a-table>
      </div>

    </a-card>
    <a-card :bordered="true" style='margin-top: 20px'>
      <a-tabs defaultActiveKey='1' >
        <a-tab-pane  tab='已邀请用户' key='1' forceRender>
          <userhome-inviter-list-modal ref='ModalShowList1' :inviterId='inviterId'></userhome-inviter-list-modal>
        </a-tab-pane>
        <a-tab-pane  tab='用户实名信息' key='2' forceRender>
          <userhome-authentication-list-modal  ref='ModalShowList2' :userhomeId='userhomeId'></userhome-authentication-list-modal>
        </a-tab-pane>
        <a-tab-pane  tab='用户绑卡信息' key='3' forceRender>
          <userhome-bank-list-modal  ref='ModalShowList3' :userhomeId='userhomeId' ></userhome-bank-list-modal>
        </a-tab-pane>
        <a-tab-pane  tab='用户购买基金' key='4' forceRender>
          <userhome-fund-list-modal  ref='ModalShowList4' :userhomeId='userhomeId' ></userhome-fund-list-modal>
        </a-tab-pane>
        <a-tab-pane  tab='余额明细' key='5' forceRender>
          <userhome-wallet-fund-log-list-modal  ref='ModalShowList5' :userhomeId='userhomeId' ></userhome-wallet-fund-log-list-modal>
        </a-tab-pane>
        <a-tab-pane  tab='佣金明细' key='6' forceRender>
          <userhome-wallet-log-list-model ref='ModalShowList6' :userhomeId='userhomeId' ></userhome-wallet-log-list-model >
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </j-modal>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import UserhomeBankListModal from './UserhomeBankListModal.vue'
import UserhomeInviterListModal from './UserhomeInviterListModal.vue'
import UserhomeAuthenticationListModal from './UserhomeAuthenticationListModal.vue'
import UserhomeFundListModal from './UserhomeFundListModal.vue'
import UserhomeWalletLogListModel from './UserhomeWalletLogListModel.vue'
import UserhomeWalletFundLogListModal from './UserhomeWalletFundLogListModal.vue'
import { deleteAction, getAction } from '@api/manage'



export default {
  name: 'UserhomeInfoDetailModal',
  mixins:[JeecgListMixin, mixinDevice],
  components: {
    UserhomeWalletLogListModel,
    UserhomeWalletFundLogListModal,
    UserhomeBankListModal,
    UserhomeInviterListModal,
    UserhomeAuthenticationListModal,
    UserhomeFundListModal
  },
  data () {
    return {
      description: '银行卡列表',
      // 表头
      columns: [
        {
          title:'用户id',
          align:"center",
          dataIndex: 'id'
        },
        {
          title:'用户邮箱',
          align:"center",
          dataIndex: 'username'
        },
        {
          title:'用户手机',
          align:"center",
          dataIndex: 'phone'
        },
        {
          title:'用户状态',
          align:"center",
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '用户类型',
          align: "center",
          dataIndex: 'isBuy',
          scopedSlots: { customRender: 'isBuy' }
        },
        {
          title:'佣金余额(元)',
          align:"center",
          dataIndex: 'money'
        },
        {
          title:'账号余额(元)',
          align:"center",
          dataIndex: 'fmoney'
        },
        {
          title:'申购基金总额(元)',
          align:"center",
          dataIndex: 'fundMoney'
        },
        {
          title:'上级账号',
          align:"center",
          dataIndex: 'inviterUsername'
        },
        {
          title:'邀请码',
          align:"center",
          dataIndex: 'inviteCode'
        },
        {
          title:'邀请人数',
          align:"center",
          dataIndex: 'inviteNum'
        },
        {
          title:'注册时间',
          align:"center",
          dataIndex: 'createTime',
          customRender:function (text) {
            return !text?"":(text.length>10?text.substr(0,10):text)
          }
        }
      ],
      url: {
        list: "/gongqiang/userhome/list",
      },
      title:"用户信息",
      visible:false,
      dictOptions:{},
      inviterId:"",
      userhomeId:"",
      superFieldList:[],
    }
  },
  created() {
    this.getSuperFieldList();
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    initDictConfig(){
    },
    handleCancel(){
      this.visible=false;
    },
    show(row)
    {
      this.visible=true;
      this.queryParam.id=row.id
      this.inviterId=row.id;
      this.userhomeId=row.id;
      this.loadData();
    },

    loadData(arg) {
      if(!this.url.list){
        this.$message.error("请设置url.list属性!")
        return
      }
      if( this.queryParam.id==null||this.queryParam.id=="")
      {
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      this.loading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records||res.result;
          if(res.result.total)
          {
            this.ipagination.total = res.result.total;
          }else{
            this.ipagination.total = 0;
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    getSuperFieldList(){
      let fieldList=[];

      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
/deep/ .ant-modal-content
{
  background-color: #f5f5f5;
}
</style>